<!-- 告警详情 》 告警处理 -->

<template>
  <div class="DetailAlarm-AlarmDeal">
    <MajorTitle :title="`${CORE.MAP.ALARM}处理`" />

    <EasyRow col3>
      <ShowDict label="处理方式" bind="dealType" :dict="DEAL_TYPE" />
      <ShowText label="处理人">{{ dealUser }}</ShowText>
      <ShowTime label="处理时间" bind="dealTime" />
    </EasyRow>

    <ShowText label="操作信息" bind="dealDesc" multiRow />

    <ShowImage v-if="!CORE.isEmpty(one.dealImageList)" label="上传图片" bind="dealImageList" pathKey="fileUrl" />

    <EasyRow v-if="repair.id" col3>
      <ShowText :one="repair" label="关联工单" bind="orderCode" isBtn @click="windowDetail(repair)" />
    </EasyRow>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixDetailToTable from '@admin/components/detail/mixDetailToTable'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'AlarmDeal',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixDetailToTable('', 'DetailRepair')],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 处理方式字典
     */
    DEAL_TYPE() {
      return CORE.DICT.ALARM_DEAL_TYPE.map(([id, ...other]) => [+id, ...other])
    },

    /**
     * 处理人
     */
    dealUser() {
      const { dealUserName = '', dealUserPhone = '' } = this.one
      return `${dealUserName}${dealUserPhone ? ` (${dealUserPhone})` : ''}`
    },

    /**
     * 维修工单
     */
    repair() {
      const { dealWorkOrder } = this.one
      if (!dealWorkOrder) return {}

      const [id, orderCode = '工单详情'] = dealWorkOrder.split(',')
      return { id, orderCode }
    },
  },
}
</script>
